$fontSize: 30px;

.tabs{
  .tab-button-icon {
    min-width: auto;
    color: #e5e5e5;
    font-size: $fontSize;
  }
  .tab-button{
    color: #e5e5e5;
  }
}


.ion-tab-icon-base {
  width: $fontSize !important;
  height: $fontSize !important;
  line-height: $fontSize !important;
  font-family: "iconfont" !important;
  font-size: $fontSize;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


$tabImageName: 'home' 'mine' 'product';
$tabIcon: '\e612' '\e614' '\e613';
@for $i from 1 to 4 {
  //for ios
  .ion-ios-tab-#{nth($tabImageName, $i)} {
    @extend .ion-tab-icon-base;
    &:before {
      content: nth($tabIcon, $i);
    }
  }
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
    @extend .ion-tab-icon-base;
    &:before {
      content: nth($tabIcon, $i);
    }
  }
  // for android
  .tabs-md .tab-button {
    .ion-md-tab-#{nth($tabImageName, $i)} {
      @extend .ion-tab-icon-base;
      &:before {
        content: nth($tabIcon, $i);
      }
    }
  }
  .tabs-md .tab-button[aria-selected=false] {
    .ion-md-tab-#{nth($tabImageName, $i)} {
      color: #e5e5e5;
    }
  }
}

//.ion-ios-tab-task,.ion-ios-tab-task-outline,.ion-ios-tab-master,.ion-ios-tab-master-outline{
//  width: 30px !important;
//  height: 32px !important;
//}
